<template>
	<view>

		<u-navbar title="" placeholder @rightClick="rightClick" bgColor="#ffffff00" :autoBack="false">

			<template #center>
				<view></view>
			</template>
			<template #left>
				<view class="title">
					视频专区
				</view>
			</template>
		</u-navbar>
		
		<view class="video">
			<view class="videoItem xflex-x" v-for="(item,index) in list" :key="index" @click="topage(item)">
				<image class="videoImg" :src="item.image" mode=""></image>
				<view class="xflex1">
					<view class="videoTop xflex-x">
						<image class="videoTopImg" src="../../static/image/img/icon.png" mode=""></image>
						<view class="videoTopText">
							{{item.name}}
						</view>
					</view>
					
					<view class="videoData xflex-x">
						<view class="videoDataText">
							{{item.view}} 播放
						</view>
						<view class="videoDataText">
							{{item.count}}条视频
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from "vue"
	import {videozone} from '@/network/home.js'
	let test = ref("测试")
	
	
	let list = ref()
	videozone().then(res=>{
		console.log(res);
		list.value = res.data
	})
	
	
	const topage = (data) =>{
		uni.navigateTo({
			url:'/pages/mine/list?id='+data.id +'&title='+data.name
		})
	}
</script>

<style lang="scss">
	
	.title {
		font-weight: bold;
		font-size: 36rpx;
		// color: #FFFFFF;
	}
	
	.videoItem{
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}
	.videoImg{
		width: 180rpx;
		height: 180rpx;
		background: rgba(0,0,0,0.3);
		border-radius: 10rpx;
		margin-right: 31rpx;
	}
	
		
	.videoTopImg{
		width: 40rpx;
		height: 40rpx;
		margin-right: 9rpx;
	}
	
	.videoTopText {
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
	}
	
	.videoData{
		margin-top: 36rpx;
	}
	.videoDataText {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		margin-right: 21rpx;
	}
	
	
</style>